// import Home from "../pages/home";
// import About from "../pages/about";

import { lazy } from "react";

import LazyLoad from "./LazyLoad";

const Home = lazy(() => import("../pages/home"));
const About = lazy(() => import("../pages/about"));

const Hot = lazy(() => import("../pages/hot"));
const Cinema = lazy(() => import("../pages/cinema"));

const routes = [
  {
    path: "/home",
    element: (
      // <Suspense fallback={<div>home loading...</div>}>
      //   <Home />
      // </Suspense>
      <LazyLoad comp={<Home />}></LazyLoad>
    ),
    children: [
      {
        path: "/home/hot",
        element: <LazyLoad comp={<Hot />}></LazyLoad>,
      },
      {
        path: "/home/cinema",
        element: <LazyLoad comp={<Cinema />}></LazyLoad>,
      },
    ],
  },
  {
    path: "/about",
    element: <LazyLoad comp={<About />}></LazyLoad>,
  },
];

export default routes;
